<template>
  <a-textarea :defaultValue="option.defaultValue" 
    :placeholder="option.placeholder" 
    @change="handleChange"></a-textarea>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  name: 'ITextArea',
  props: {
    fieldId: {
      type: String,
      requried: true
    },
    option: {
      type: Object,
      required: false,
      default: () => {
        return {
          maxLength: 100, 
          minLength: 0, 
          placeholder: '', 
          defaultValue: ''
        };
      }
    },
    defaultHelp: {
      type: String,
      required: false,
      default: () => {
        return '';
      }
    }
  },
  methods: {
    handleChange(e) {
      this.setValue(this, e.target.value);
    },
    setValue: debounce((self, value) => {
      if (value.length > self.option.maxLength) {
        self.$store.dispatch('validate', {fieldId: self.fieldId, status: 'error', help: '输入内容长度不能超过' + self.option.maxLength});
      } else if (value.length < self.option.minLength) {
        self.$store.dispatch('validate', {fieldId: self.fieldId, status: 'error', help: '输入内容长度不能少于' + self.option.minLength});
      } else {
        self.$store.dispatch('validate', {fieldId: self.fieldId, status: undefined, help: self.defaultHelp});
        self.$emit('change', value);
      }
    }, 500)
  }
}
</script>

<style scoped>

</style>